<template>
  <div class="tab">
    <h3>工单管理</h3>
    <div class="tab__tabbackgroud">
      <ElButton @click="showEdit = true" type="primary">增加工单</ElButton>
      <table
        class="tab__tabbackgroud__all"
        border=""
        width="600px"
        height="50px"
      >
        <tr>
          <th>序号</th>
          <th>工单号</th>
          <th>事件名称</th>
          <th>事件地址</th>
          <th>耗时(分钟)</th>
          <th>工单状态</th>
          <th>操作</th>
        </tr>
        <tr v-for="(item, index) in itemContent" :key="item.id">
          <td>{{ index + 1 }}</td>
          <td>{{ item.num }}</td>
          <td>{{ item.eventName }}</td>
          <td>{{ item.address }}</td>
          <td>耗时</td>
          <td>{{ item.state }}</td>
          <td>操作按钮</td>
        </tr>
      </table>
    </div>
    <el-dialog v-model="showEdit" title="增加工单">
      <div class="tab__addTab">
        <div class="tab__addTab__input">
          选择事件：
          <select v-model="currentId" @change="onChange">
            <option v-for="item in eventList" :key="item.name" :value="item.id">
              {{ item.name }}
            </option>
          </select>
          <br />
          事件地址：
          <input type="text" v-model="currentEvent.address" />
          <br />
          工单号：<input v-model="currentEvent.num" type="number" />
        </div>
        <div class="tab__addTab__input">
          上门时间：<input v-model="currentEvent.time" type="text" /> <br />
          离开时间：<input v-model="currentEvent.leaveTime" /> <br />
          工单状态：<select v-model="currentEvent.state">
            <option>处理中</option>
            <option>已处理</option></select
          ><br />
        </div>
        <div class="tab__addTab__but">
          <el-button @click="showEdit = false">取消</el-button>
          <el-button @click="addTabContent" type="primary">保存</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { useRoute } from 'vue-router'
import { ElButton, ElDialog } from 'element-plus'
export default {
  name: 'SheetPage',
  components: { ElButton, ElDialog },
  setup() {
    const eventList = ref(
      JSON.parse(
        localStorage.getItem('eventList')
          ? localStorage.getItem('eventList')
          : '[]'
      )
    )
    console.log(eventList.value)

    const route = useRoute()
    const currentId = ref('')
    const currentEvent = ref({})
    const showEdit = ref(false)

    const id = route.query.id
    // console.log(route.query.id)
    const itemContent = reactive(
      JSON.parse(
        localStorage.getItem('sheet') ? localStorage.getItem('sheet') : '[]'
      )
    )
    const itemList = ref([])
    const showInputClick = () => {
      itemContent.push(itemList.value)
    }
    for (let i = 0; i < eventList.value.length; i++) {
      const tempId = eventList.value[i].id
      if (tempId == id) {
        itemList.value = eventList.value[i]
        break
      }
    }
    console.log(itemList.value.sarus)

    function onChange() {
      console.log('事件改变了')
      for (let i = 0; i < eventList.value.length; i++) {
        const element = eventList.value[i]
        if (element.id == currentId.value) {
          currentEvent.value = element
        }
      }
    }

    // 保存功能
    function addTabContent() {
      console.log('保存')
      console.log(currentEvent.value)
      itemContent.push({
        eventName: currentEvent.value.name,
        eventId: currentEvent.value.id,
        address: currentEvent.value.address,
        num: currentEvent.value.num,
        time: currentEvent.value.time,
        leaveTime: currentEvent.value.leaveTime,
        state: currentEvent.value.state,
      })
      localStorage.setItem('sheet', JSON.stringify(itemContent))
    }
    return {
      eventList,
      currentId,
      currentEvent,
      itemList,
      itemContent,
      showEdit,
      showInputClick,
      onChange,
      addTabContent,
    }
  },
}
</script>

<style lang="scss" scoped>
.tab {
  &__tabbackgroud {
    &__all {
      margin: 0 auto;
      th {
        background-color: rgb(191, 194, 194);
      }
    }
  }

  &__addTab {
    margin-top: 40px;

    &__input {
      text-align: center;
      margin: 0 12px;
    }

    &__but {
      text-align: center;
    }
  }
}
</style>
